<template>
  <view class="order-list-wrap">
    <u-tabs :list="list" lineColor="#d69b1d"></u-tabs>
    <view class="order-list-item-wrap">
      <view class="order-list-title-wrap">
        <text>订单号: 123123123123123213</text>
        <text class="order-list-status-txt">待付款</text>
      </view>

      <view class="order-list-content-wrap">
        <view class="order-list-content-left">
          <image
            src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg"
          />
        </view>
        <view class="order-list-content-right">
          <view class="order-list-title"
            >成人游泳区培训（8-12）人大班（北航校区）</view
          >
          <view class="order-list-price">￥880.00</view>
        </view>
      </view>

      <view class="order-list-foot-wrap">
        <view class="order-list-price-wrap">
          <view class="order-list-price-item">
            <text class="order-list-price-label">优惠:</text>
            <text class="order-list-price-num">￥0.00</text>
          </view>
          <view class="order-list-price-item">
            <text class="order-list-price-label">订单总额:</text>
            <text class="order-list-price-num order-list-price-num-all"
              >￥0.00</text
            >
          </view>
        </view>
        <view class="order-list-btn-wrap">
          <view
            :style="{ width: '157rpx', height: '55rpx' }"
            class="h-button h-button-primary"
            @tap="handleBtn"
          >
            立即支付
          </view>
        </view>
      </view>
    </view>
    <view class="order-list-item-wrap">
      <view class="order-list-title-wrap">
        <text>订单号: 67855674545623q4</text>
        <text class="order-list-status-txt">待核销</text>
      </view>

      <view class="order-list-content-wrap">
        <view class="order-list-content-left">
          <image
            src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg"
          />
        </view>
        <view class="order-list-content-right">
          <view class="order-list-title"
            >成人游泳区培训（8-12）人大班（北航校区）</view
          >
          <view class="order-list-price">￥880.00</view>
        </view>
      </view>

      <view class="order-list-foot-wrap">
        <view class="order-list-price-wrap">
          <view class="order-list-price-item">
            <text class="order-list-price-label">优惠:</text>
            <text class="order-list-price-num">￥0.00</text>
          </view>
          <view class="order-list-price-item">
            <text class="order-list-price-label">订单总额:</text>
            <text class="order-list-price-num order-list-price-num-all"
              >￥0.00</text
            >
          </view>
        </view>
        <view class="order-list-btn-wrap">
          <view
            :style="{ width: '157rpx', height: '55rpx' }"
            class="h-button h-button-text"
            @tap="handleBtn"
          >
            核销二维码
          </view>
        </view>
      </view>
    </view>
    <view class="order-list-item-wrap">
      <view class="order-list-title-wrap">
        <text>订单号: 657764656546123132</text>
        <text class="order-list-status-txt">已核销</text>
      </view>

      <view class="order-list-content-wrap">
        <view class="order-list-content-left">
          <image
            src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg"
          />
        </view>
        <view class="order-list-content-right">
          <view class="order-list-title"
            >成人游泳区培训（8-12）人大班（北航校区）</view
          >
          <view class="order-list-price">￥880.00</view>
        </view>
      </view>

      <view class="order-list-foot-wrap">
        <view class="order-list-price-wrap">
          <view class="order-list-price-item">
            <text class="order-list-price-label">优惠:</text>
            <text class="order-list-price-num">￥0.00</text>
          </view>
          <view class="order-list-price-item">
            <text class="order-list-price-label">订单总额:</text>
            <text class="order-list-price-num order-list-price-num-all"
              >￥0.00</text
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request, requestData } from '@/utils/http.js'
export default {
  name: 'myOrder',
  data() {
    return {
      triggeredAll: true,
      triggered: true,
      modalShow: false,
	  page: 1,
      list: [
        {
          name: '全部',
        },
        // {
        //   name: '待付款',
        // },
        // {
        //   name: '待核销',
        // },
        // {
        //   name: '已核销',
        // },
      ],
      qrcodeText: '二维码',
    }
  },
  onShow: function () {
    this.initList()
  },
  methods: {
    //我的订单列表，接口 30 ，退款在31
    initList() {
      request('/user/pay/list', {
		  page: 0
	  })
        .then((res) => {
          console.log(res)
          //this.titckTemplates = res?.datas?.templates
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  watch: {},
}
</script>

<style lang="less">
.order-list-wrap {
  width: 100%;
  overflow: hidden;
  height: 100vh;
  padding-bottom: 100rpx;
  position: relative;
  box-sizing: border-box;
  background-color: #fdfcf5;
}
.order-list-item-wrap {
  width: 100%;
  height: auto;
  max-height: 433rpx;
  box-sizing: border-box;
  margin-top: 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.order-list-title-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 25rpx;
  font-size: 24rpx;
  color: #888787;
  border-bottom: 1px solid #efefef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-list-status-txt {
  color: #d5ad57;
}
.order-list-content-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
}
.order-list-content-left {
  width: 176rpx;
  height: 176rpx;
  box-sizing: border-box;
}
.order-list-content-left image {
  width: 176rpx;
  height: 176rpx;
  border-radius: 10rpx;
}
.order-list-content-right {
  flex: 1;
  padding-left: 25rpx;
  padding-right: 0;
  font-size: 26rpx;
  box-sizing: border-box;
  font-weight: 500;
  padding-top: 8rpx;
}
.order-list-price {
  margin-top: 20rpx;
}
.order-list-foot-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 25rpx;
}
.order-list-price-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  font-size: 26rpx;
}
.order-list-price-item:first-child {
  margin-right: 28rpx;
}
.order-list-price-item {
  color: #9c9c9c;
}
.order-list-price-num-all {
  color: #010101;
}
.order-list-price-label {
  margin-right: 20rpx;
}
.order-list-btn-wrap {
  width: 100%;
  height: auto;
  margin-top: 13rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.order-list-btn-text {
  justify-content: flex-end;
}
.order-list-modal {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.h-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  color: #fff;
  border-radius: 27.5rpx;
  width: 157rpx;
  height: 55rpx;
}
.h-button-default {
  background-color: #efefef;
  color: #010101;
}
.h-button-primary {
  background-image: linear-gradient(to right, #d5ad57, #d69b1d);
  color: #fff;
}
.h-button-text {
  background-color: rgba(0, 0, 0, 0);
  color: #f34040;
}
.h-button-disabled {
  background-color: #cbcbcb;
  color: #888787;
  background-image: linear-gradient(to right, #cbcbcb, #cbcbcb);
}
</style>
